<template>
	<el-dialog title="XML样例报文" :visible.sync="visible" width="1200px" :center="false">
		<div slot="title" class="dialog-header-title">
			<span>XML样例报文</span>
		</div>

		<div class="smp-search smp_panel_1">
			<div class="smp_panel_header">
				<div class="smp_panel_pre"></div>
				<div class="smp_panel_title">请求数据</div>
			</div>
			<div class=" smp_panel_body">
		<el-form :inline="false" label-width="100px" size="mini" ref="form" :model="form" :rules="rules">
			<el-row>
				<el-col :span="7">
					<el-form-item label="IP地址:" :label-col="{ span: 24 }" :wrapper-col="{ span: 16  }" prop="ip">
						<el-select v-model="query.ip" style="width: 100%" placeholder="IP地址">
							<el-option v-for="item in esbEnvironmentList" :key="item.ip"
								:label="item.ip+'('+dictName(item.esbFlg,'SMP0031')+')'" :value="item.ip">
							</el-option>
						</el-select>
					</el-form-item>
				</el-col>

				<el-col :span="7">
					<el-form-item label="端口:" :label-col="{ span: 24 }" :wrapper-col="{ span: 16  }" prop="port">
						<el-input v-model="query.port"></el-input>
						</el-select>
					</el-form-item>
				</el-col>

				<el-col :span="7">
					<el-form-item label="字符编码:" :label-col="{ span: 24 }" :wrapper-col="{ span: 16  }" prop="charSet">
						<el-select v-model="query.charSet" style="width: 100%" placeholder="IP字符编码">
							<el-option v-for="item in dict('SMP0004')" :key="item.itemCode" :label="item.itemName"
								:value="item.itemCode">
							</el-option>
						</el-select>
					</el-form-item>
				</el-col>

				<el-col :span="3">
					
						<el-button size="mini" type="primary" plain @click="onSubmit">发&nbsp;&nbsp;&nbsp;送</el-button>
					<!-- 	<el-button @click="reset">重&nbsp;&nbsp;&nbsp;置</el-button> -->
	
				</el-col>
				<el-col :span="24">
					
								<el-form-item label="请求报文:" prop="requestBody">
									<el-input type="textarea" :rows="15" v-model="query.requestBody" placeholder="请求报文">
									</el-input>
								</el-form-item>
				</el-col>
				<el-col :span="12">
					<div class="article">
						<!-- vue展示markdown内容,v-highlight自定义指令 -->
						<div v-highlight v-html="query.responseBody" class="markdown-body" id="content"></div>
					</div>
				</el-col>
			</el-row>
		</el-form>
		</div>
		</div>
		
		<div class="smp-search smp_panel_1">
			<div class="smp_panel_header">
				<div class="smp_panel_pre"></div>
				<div class="smp_panel_title">响应数据</div>
			</div>
			<div class=" smp_panel_body">
			<el-form :inline="false" label-width="120px" size="mini" ref="form" :model="query" :rules="rules">
				<el-row>
					<el-col :span="24">
						<div class="article">
							<!-- vue展示markdown内容,v-highlight自定义指令 -->
							<div v-highlight v-html="query.responseBody" class="markdown-body" id="content"></div>
						</div>
					</el-col>
				</el-row>
			</el-form>
		</div>
		</div>
		
		<span slot="footer" class="dialog-footer">
			<el-button type="primary" plain @click="submit" size="mini">
				<i class="el-icon-check"></i>
				确定
			</el-button>
			<el-button @click="visible = false" size="mini">
				<i class="el-icon-close"></i>
				取消
			</el-button>
		</span>
	</el-dialog>
</template>
<script>
	"use strict";
	export default {
		data() {
			return {
				visible: false,
				query: {
					ip: "10.0.91.15",
					port: "10270",
					charSet: "01",
					requestBody: ""

				}
			}
		},
		methods: {
			init(data) {
				this.query.requestBody = data;
				this.visible = true;
			},

			ShowDialog(data) {
				this.init(data);

			},
			handleCancel(e) {
				this.visible = false;
			},
			submit() { //新增
			},
		}
	};
</script>
